<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="handleForm(false, {})" :disabled="isDisabledAuth(Auth.saveMchQrcodeTemplate)">
          <Icon icon="i-ant-design:plus-outlined" /> {{ t("新增") }}
        </a-button>
      </template>

      <template #card-cover="{ record }">
        <div class="card-cover">
          <ImagePreview :image-list="[{ src: record.previewImageBase64, width: '200px', height: 310 }]" />
        </div>
      </template>

      <template #cardMeta-title="{ record }">
        <span class="card-title">{{ record.name }}</span>
      </template>

      <!-- <template #cardMeta-description="{ record }">
        <span>{{ record.name }}</span>
      </template> -->

      <template #preview="{ record }">
        <div class="qrcode-preview">
          <ImagePreview class="image" :image-list="[{ src: record.previewImageBase64, width: 140, height: 200 }]" />

          <div class="template-name">{{ record.name }}</div>
        </div>
      </template>
    </BasicTable>
    <InputForm @register="registerInputForm" @success="handleSuccess" />
  </div>
</template>
<script lang="ts" name="MchQrcodeTemplate" setup>
  import { ref } from "vue"
  import { Auth } from "/@/enums/authEnum"
  import { BasicTable, BasicColumn, useTable } from "/@/components/Table"
  import { useDrawer } from "/@/components/Drawer"
  import { useI18n } from "/@/hooks/web/useI18n"
  import { usePermission } from "/@/hooks/web/usePermission"
  import { useGlobSetting } from "/@/hooks/setting"
  import { columns, searchFormSchema } from "./template.data"
  import { pageMchQrcodeTemplate, deleteMchQrcodeTemplate } from "/@/api"
  import { useMessage } from "/@/hooks/web/useMessage"
  import InputForm from "./TemplateForm.vue"
  import { ImagePreview } from "/@/components/Preview/index"
  import { useRouter } from "vue-router"
  import { Icon } from "/@/components/Icon"

  const { t } = useI18n("")
  const { createMessage } = useMessage()
  const glob = useGlobSetting()
  const { isDisabledAuth } = usePermission()
  const [registerInputForm, { openDrawer: openInputForm }] = useDrawer()

  const actionColumn: BasicColumn = {
    width: 130,
    title: "操作",
    dataIndex: "action",
    fixed: "right",
    slot: "tableActions",
    actions: (record: Recordable) => [
      {
        label: "删除",
        color: "error",
        ifShow: record.sendStatus != 1,
        auth: Auth.deleteMchQrcodeTemplate,
        popConfirm: {
          title: "是否确认删除",
          confirm: handleDelete.bind(null, record),
        },
      },
      {
        label: "编辑",
        auth: Auth.updateMchQrcodeTemplate,
        onClick: handleForm.bind(null, true, record),
      },
    ],
    dropDownActions: (record: Recordable) => [
      {
        label: "编辑",
        auth: Auth.updateMchQrcodeTemplate,
        onClick: handleForm.bind(null, true, record),
      },
      {
        label: "编辑",
        auth: Auth.updateMchQrcodeTemplate,
        onClick: handleForm.bind(null, true, record),
      },
    ],
  }

  const [registerTable, { reload, expandAll, collapseAll, expandCollapse }] = useTable({
    title: "商户码牌模板",
    api: pageMchQrcodeTemplate,
    columns: columns,
    bordered: false,
    beforeFetch: (params) => {
      return params
    },
    formConfig: {
      baseColProps: { lg: 6, md: 12 },
      labelWidth: 90,
      schemas: searchFormSchema,
      showResetButton: false,
    },
    showIndexColumn: false,
    showTableSetting: true,
    useSearchForm: true,
    isCardTable: true,
    pagination: {
      current: 1,
      pageSize: 15,
      pageSizeOptions: ["15", "50", "80", "100"],
    },
    canResize: true,
    rowKey: "id",
    actionColumn,
    cardProps: {
      style: {
        width: "230px",
      },
      colEx: {
        xs: 24,
        sm: 12,
        md: 8,
        lg: 8,
        xl: 6,
        xxl: 4,
      },
    },
  })

  const handleForm = (isUpdate, record) => openInputForm(true, { record, isUpdate })
  const handleDelete = async (record) => await deleteMchQrcodeTemplate({ id: record.id }, reload)
  const handleSuccess = () => reload()
</script>

<style lang="less" scoped>
  .qrcode-preview {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .card-cover {
    display: flex;
    width: 100%;
    justify-content: center;
  }

  .card-title {
    display: flex;
    width: 100%;
    font-size: 14px !important;
    font-weight: 400;
    justify-content: center;
    margin-top: -5px;
  }
</style>
